import React from "react"


interface AaaProps {
    children: React.ReactNode
}
const Aaa: React.FC<AaaProps> = (props) => {
    const { children } = props

    const count = React.Children.count(children)
    console.log('count', count)

    React.Children.forEach(children, (item, index) => {
        console.log('item' + index, item)
    })

    const first = React.Children.only(children);
    console.log('first', first);

    return <div className='container'>
        {
            React.Children.map(children, (item) => {
                return <div className='item'>{item}</div>
            })
        }
    </div>
}

export default function ReactChildrenTest() {
    return <Aaa>
        <a href="#">111</a>
        <a href="#">222</a>
        <a href="#">333</a>
        {
            [
                <a href="#">444</a>,
                <a href="#">555</a>
            ]
        }
    </Aaa>
}